// var cartList = [
//     // 每一个对象就是一个购物车内容的数据
//     // id 商品id 
//     // status 商品的状态 是否被选中 
//     // pic 商品的图片
//     // name 商品名称 
//     // price 商品的价格
//     // number  商品的数量 放到购物车中的数量 
//     // total  商品的库存量
//     { id: 111234, status: false, pic: 'https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332', name: '我是一个手机, 不知道是啥', price: 100, number: 3, total: 16 },
//     { id: 123456, status: true, pic: 'https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500', name: '我是一个电脑, 不知道是啥', price: 98.72, number: 1, total: 7 },
//     { id: 965874, status: false, pic: 'https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500', name: '我是一个手纸, 不知道是啥', price: 356.21, number: 2, total: 22 },
//     { id: 343221, status: true, pic: 'https://img13.360buyimg.com/n7/jfs/t1/122026/19/34603/134468/6461889eFb26fb42b/72ea798f1226a116.jpg', name: '六味地黄丸,男人的救星', price: 41, number: 5, total: 30 }
  
// ]


// 第一次打开 本地存储中是没有这些数据的 

// localstorage 只能存字符串 
// 上面是复杂数据类型 需要将 复杂数据类型转成字符串 再保存到 本次存储 
// JSON 本质是字符串   js数据类型可以跟它互转 

// JSON.stringify(js数据类型)  -> json 
// JSON.parse(json数据)  -> js数据类型


// var data = JSON.stringify(cartList);
// window.localStorage.setItem('list',data);
// 打开页面 首先看本地存储中是否有list对应的数据并且把它转成js数据类型 
// 如果没有直接赋值一个新的数组 
var res = JSON.parse(window.localStorage.getItem('list')) || [
    { id: 111234, status: false, pic: 'https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332', name: '我是一个手机, 不知道是啥', price: 100, number: 3, total: 16 },
    { id: 123456, status: true, pic: 'https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500', name: '我是一个电脑, 不知道是啥', price: 98.72, number: 1, total: 7 },
    { id: 965874, status: false, pic: 'https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500', name: '我是一个手纸, 不知道是啥', price: 356.21, number: 2, total: 22 },
    { id: 343221, status: true, pic: 'https://img13.360buyimg.com/n7/jfs/t1/122026/19/34603/134468/6461889eFb26fb42b/72ea798f1226a116.jpg', name: '六味地黄丸,男人的救星', price: 41, number: 5, total: 30 }
];


//0 获取元素
var divele = document.getElementsByClassName('content')[0];
bindHtml();
function bindHtml(){
    // 渲染数据  需要拿到所有的变化的数据 
    // 多少被选中的   决定全选按钮是否被选中
    // 总件数   每件商品数量的和   
    // 总价格   每件商品的总价 加起来求和 
    var totalSelect = 0,totalNum = 0,totalPrice = 0;
    res.forEach(function(item){
        // item是每个对象  
        if(item.status == true){
            totalSelect++
            totalNum += item.number
            totalPrice += item.number * item.price
        }
    });

    // 拼接字符串 
    var str = `<div class="top">
    <input class="toggleAll" type="checkbox" ${totalSelect == res.length?'checked':''}> 全选
  </div>
  <ul>`;

  // 中间部分的数据拼接道str后边 中间是li 每个商品是个li 多个商品拼接在一起
  // 然后再拼接到str后边 
  res.forEach(function(item){
    str += `<li>
    <div class="status">
      <input class="opt" data-id="${item.id}" type="checkbox" ${item.status?'checked':''}>
    </div>
    <div class="show">
      <img src="${item.pic}" alt="">
    </div>
    <div class="title">
      ${item.name}
    </div>
    <div class="price">
      ￥ ${item.price.toFixed(2)}
    </div>
    <div class="number">
      <button class="subBtn" data-id="${item.id}">-</button>
      <input type="text" value="${item.number}">
      <button class="add"  data-id="${item.id}">+</button>
    </div>
    <div class="sub">
      ￥ ${(item.number * item.price).toFixed(2)}
    </div>
    <div class="destory">
      <button class="del" data-id="${item.id}">删除</button>
    </div>
  </li>
    `
  });

  // 底部的数据拼接道str后边 
  str += `
  </ul>
    <div class="bottom">
      <div class="totalNum">
        总件数 : ${totalNum}
      </div>
      <div class="btns">
        <button class="clear">清空购物车</button>
        
        <button  class="buy" data-price="${totalPrice}" ${totalPrice===0?'disabled':''}>去结算</button>
        <button  class="removetarget" ${totalSelect===0?'disabled':''}>删除所有已选中</button>
      </div>
      <div class="totalPrice">
        总价格 : ￥ <span>${totalPrice.toFixed(2)}</span>
      </div>
    </div>
  `
  //str = 头部+中间+底部
//  '' + 'li'+'li'+'li'+'li' +'底部'
  divele.innerHTML = str;

  //将修改的数据保存到本地存储中
  window.localStorage.setItem('list',JSON.stringify(res))
}

// 接下来就是各种事件  全选  选中每个商品  数量-  数量+ 删除  清空购物车 结算  删除所选

// 按照挨个遍历获取元素绑定事件 操作太多个 
// 为了提升页面的性能  减少dom操作  
// 事件委托  
// 这些元素有共同的父亲 divele
// 事件目标获取  : 事件对象.target 
divele.onclick = function(event){
    var e = event || window.event; // 获取事件对象 

    // 判断是否点击的是全选  
    if(e.target.className == 'toggleAll'){
        // alert('您点击的是全选按钮')
        e.target.checked
        res.forEach(function(item){
            item.status =  e.target.checked
        });
        //将修改保存 然后重新渲染页面 
        bindHtml();
    }

    // 判断是否点击的是清空购物车 

    if(e.target.className == 'clear'){
        // alert('您点击的是清空购物车按钮')
        //让数组的 长度变成0
        res.length = 0;
        //将修改保存 然后重新渲染页面 
        bindHtml();

    }

    // 判断是否点击的是 结算 
    // 如果算出来总价为0 结算按钮可以禁用
    // 如果算出来总价>0 结算按钮可以点击
    if(e.target.className == 'buy'){
        // alert('您点击的是结算按钮')
        //弹框你应该付款多少钱 
        // var data = 0;
        // res.forEach(function(item){
        //     if(item.status){
        //        data += item.price * item.number;
        //     }
        // })
        // alert(data);
        var data = e.target.dataset.price - 0; // 标签上属性的值用引号包裹得到的是字符串 
        // -0 转成数值 
        alert(data.toFixed(2));


    }

    // 判断是否点击的是 删除已经选中 
    if(e.target.className == 'removetarget'){
        // alert('您点击的是删除已经选中按钮')
        // for(var i=0;i<res.length;i++){
        //     if(res[i].status == true){
        //         res.splice(i,1);
        //         i--
        //     }
        // }

        //方法二 
        res = res.filter(function(item){
            // return item.status == false
            return !item.status

        })
        //将修改保存 然后重新渲染页面 
        bindHtml();

    }

    // 判断是否点击的是每一项的-
    if(e.target.className == 'subBtn'){
        // alert('您点击的是-按钮')
        // 点击-号按钮 获取 到这个按钮是哪个商品的id 
        // 根据id找到商品  让商品的number -1
        // alert(e.target.dataset.id-0);
        var info = res.find(function(item){
            return item.id === e.target.dataset.id-0
        })

        // console.log(info);
        if(info.number<=1) return;
        info.number--;
          //将修改保存 然后重新渲染页面 
          bindHtml();

    }


    // 判断是否点击的是每一项的+
    if(e.target.className == 'add'){
        var info = res.find(function(item){
            return item.id === e.target.dataset.id-0
        })

        // console.log(info);
        if(info.number>=info.total) return;
        info.number++;
          //将修改保存 然后重新渲染页面 
          bindHtml();

    }

    // 判断是否点击的是每一项的前面的复选框
    if(e.target.className == 'opt'){
        // alert('您点击的是产品前面的复选框')
        // console.log(e.target.dataset.id);
        var info = res.find(function(item){
            return item.id === e.target.dataset.id-0
        }); // 返回符合要求的第一个元素 

        // console.log(info);
        info.status = !info.status;


        // 挨个判断四个产品的复选框  如果都被选中 全选按钮也被选中 
        // 如果有一个没有被选中 全选按钮取消选中  
        // every 高级方法  
           //将修改保存 然后重新渲染页面 
           bindHtml();
    }


    // 判断是否点击的是每一项的删除按钮
    if(e.target.className == 'del'){
        var id = e.target.dataset.id-0; //知道这个按钮是哪个商品的id
        var info = res.find(function(item){
            return item.id === id
        }); // info 就是要删除的这个产品 是个对象
        
        // 删除数据以前务必要询问是否删除 
        if(!window.confirm(`您确定要删除${info.name}这个产品么`)) return; // 不想删除return  

        // if ()括号中最终为true 才会进入大括号
        // 想删除往下走 
        res = res.filter(function(item){
            return item.id !== id 
        })


        //将修改保存 然后重新渲染页面 
        bindHtml();
    }






}



var test = '\n';

var test1 = `

`